<template>
    <span class="" :style="{fontSize: fontSize, color: color}">
      <i class="wi wi-day-sunny" v-if="weatherType === '晴'"></i>
      <i class="wi wi-cloudy" v-if="weatherType === '阴'"></i>
      <i class="wi wi-day-cloudy" v-if="weatherType === '多云'"></i>
      <i class="wi wi-rain" v-if="weatherType === '小雨'"></i>
      <i class="wi wi-rain" v-if="weatherType === '雨'"></i>
      <i class="wi wi-rain" v-if="weatherType === '大雨'"></i>
      <i class="wi wi-snow" v-if="weatherType === '小雪'"></i>
      <i class="wi wi-snow" v-if="weatherType === '雪'"></i>
      <i class="wi wi-fog" v-if="weatherType === '雾'"></i>
      <i class="wi wi-day-haze" v-if="weatherType === '霾'"></i>
      <i class="wi wi-rain-mix" v-if="weatherType === '中雨'"></i>
      <i class="wi wi-snow-wind" v-if="weatherType === '中雪'"></i>
      <i class="wi wi-windy" v-if="weatherType === '风'"></i>
      <i class="wi wi-showers" v-if="weatherType === '阵雨'"></i>
    </span>
</template>

<script>
  export default {
    name: 'zz-weather',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      fontSize: {
        type: String,
        default: '14px'
      },
      marginLeft: {
        type: String,
        default: ''
      },
      weatherType: {
        type: String,
        default: '晴'
      },
      color: {
        type: String,
        default: '#00e8ff'
      }
    }
  }
</script>

<style scoped lang='scss'>
  @import 'weather-icons.css';
</style>
